<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户中心-上传头像</title>
    <link th:href="@{/css/base.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/toefl.css}" rel="stylesheet" type="text/css">
    <script th:src="@{/js/jquery-2.1.0.js}" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/userinfor.js}"></script>
</head>
<script>

</script>

<body>
<div class="doc910 fn-right">
    <div class="flcb_cardMenu">
        <ul>
            <li class="on">
                <a href="###" target="infor" id="basic">基本资料</a>
            </li>
            <li>
                <a href="###" target="infor" id="imgUpload">头像设置</a>
            </li>
            <li>
                <a href="###" target="infor" id="passwordChange">密码设置</a>
            </li>
        </ul>
    </div>

    <div class="userCenter" style="display: block;" id="basicContent">
        <form th:action="@{/user/update}" th:object="${user}">
            <dl>
                <dt>用户名：</dt>
                <dd><input type="text" class="userCenter_input" th:field="*{userName}"
                           placeholder="用户名"></dd>
            </dl>
            <dl>
                <dt>性别：</dt>
                <dd>
                    <div class="userCenter_radio">
                        <input type="radio" th:field="*{userSex}" value="男"><span>男</span>
                        <input type="radio" th:field="*{userSex}" value="女"><span>女</span>
                    </div>
                </dd>
            </dl>
            <dl>
                <dt>邮箱：</dt>
                <dd><input type="text" class="userCenter_input" th:field="*{userEmail}"></dd>
            </dl>
            <dl>
                <dt>电话：</dt>
                <dd><input type="text" class="userCenter_input" th:field="*{userTel}"></dd>
            </dl>
            <dl>
                <dt>出生日期：</dt>
                <dd>
                    <input type="date" class="userCenter_input" th:field="*{userBirth}">
                </dd>
            </dl>
            <dl>
                <dt>个性签名：</dt>
                <dd><textarea id="area" placeholder="请输入个性签名" cols="" rows="" class="userCenter_t"
                              th:field="*{userSign}"></textarea>
                    <p class=" userCenter_text"><span id="text-count">100</span>/100</p>
                </dd>
            </dl>
            <dl>
                <dt></dt>
                <dd>
                    <a onclick="$('input[name=\'baseData\']').click();" class="userCenter_save">保存</a>
                    <input name="baseData" type="submit" style="display: none">
                </dd>
            </dl>

        </form>
    </div>

    <div class="userCenter" style="display: none;" id="passwordChangeContent">
        <form th:action="@{/user/updatePwd}">
            <dl>
                <dt>密码：</dt>
                <dd><input id="pwd0" name="oldPwd" type="text" class="userCenter_input"></dd>
                <input id="oldPwd" th:value="${session.USER_SESSION_KEY.userPwd}" style="display: none">
            </dl>
            <dl>
                <dt>新密码：</dt>
                <dd><input name="newPwd" onkeyup="validate()" id="pwd1" type="text" class="userCenter_input"></dd>
            </dl>
            <dl>
                <dt>确认新密码：</dt>
                <dd><input name="" onkeyup="validate()" id="pwd2" type="text" class="userCenter_input"></dd>
            </dl>
            <dl>
                <span id="tips"></span>
            </dl>
            <dl>
                <dt></dt>
                <dd>
                    <a onclick="validatePwd()" href="###" class="userCenter_save">保存</a>
                </dd>
            </dl>
            <div>
                <input name="confirm" id="confirmUpdatePwd" type="submit" value="确认更改" style="display: none">
            </div>
        </form>
    </div>

    <div class="userTX" style="display: none;" id="imgUploadContent">
        <div class=" fn-clear">
            <a class="userTX_b" onclick="$('input[name=\'userAvatarUpload\']').click();" href="###">头像选择</a>
        </div>

        <div class="userTXPic">
            <div class="userTXPicText">仅支持JPG、PNG格式且文件小于5M</div>
            <div class="userTX_240x240"><img id="userAvatar" alt="用户头像"
                                             width="240"
                                             height="240" th:src="@{/user/getAvatar}"></div>

        </div>
        <div class="userTXShow">
            <div class="fn-clear">
                <div class="userTXPicText">您上传的图片会自动生成一下三种尺寸，请观察是否清晰</div>
                <div class="userTX_150x150"><img id="userAvatar150"
                                                 width="150"
                                                 height="150" th:src="@{/user/getAvatar}"><span>150*150</span></div>
                <div class="userTX_60x60"><img id="userAvatar60"
                                               width="60"
                                               height="60" th:src="@{/user/getAvatar}"><span>60*60</span></div>
                <div class="userTX_30x30"><img id="userAvatar30"
                                               width="30"
                                               height="30" th:src="@{/user/getAvatar}"><span>30*30</span></div>
            </div>
            <div class="userTXSave">
                <a id=="userTXSave" class="userTXSave" onclick="$('input[name=\'userAvatarSubmit\']').click();"
                   href="###">确认上传</a>
            </div>
            <form th:action="@{/user/avatarUpload}" method="post" enctype="multipart/form-data">
                <input class="userAvatarUpload" id="userAvatarUpload" type="file" name="userAvatarUpload"
                       accept="image/x-png,image/jpeg,image/bmp"
                       size="40" style="display: none;"/>
                <input name="userAvatarSubmit" type="submit" value="上传头像" style="display: none;"/>
            </form>
        </div>
    </div>

</div>

<script type="text/javascript">
    //初始化字数
    $("#text-count").text(100 - $("#area").val().length);
    /*字数限制*/
    $("#area").on("input propertychange", function () {
        var $this = $(this),
            _val = $this.val(),
            count = "";
        if (_val.length > 100) {
            $this.val(_val.substring(0, 100));
        }
        count = 100 - $this.val().length;
        $("#text-count").text(count);
    });
</script>
<script th:inline="javascript">

    // 验证当前输入的密码
    function validatePwd() {
        var oldPwd = document.getElementById("oldPwd").value;
        var pw0 = document.getElementById("pwd0").value;
        console.log(oldPwd + " : " + pw0)
        if (oldPwd !== pw0) {
            alert("请输入正确的当前密码！")
            document.getElementById("confirmUpdatePwd").disabled = true;
        } else if (document.getElementById("pwd1").value.length === 0) {
            alert("请输入新的密码！")
            document.getElementById("confirmUpdatePwd").disabled = true;
        } else if (validate()) {
            alert("修改成功！")
            document.getElementById("confirmUpdatePwd").disabled = false;
            $('input[name=\'confirm\']').click();
        }
    }

    // 修改密码有效性检测
    function validate() {

        var pwd1 = document.getElementById("pwd1").value;
        var pwd2 = document.getElementById("pwd2").value;
        <!-- 对比两次输入的密码 -->
        if (pwd1 === pwd2) {
            document.getElementById("tips").innerHTML = "<font color='green'>两次密码相同</font>";
            document.getElementById("confirmUpdatePwd").disabled = false;
            return true;
        } else {
            document.getElementById("tips").innerHTML = "<font color='green'>两次密码不同</font>";
            document.getElementById("confirmUpdatePwd").disabled = true;
            return false;
        }
    }

    $(function () {
        $("#userAvatarUpload").change(function (e) {
            for (var i = 0; i < e.target.files.length; i++) {
                var file = e.target.files.item(i);
                var freader = new FileReader();
                freader.readAsDataURL(file);
                freader.onload = function (e) {
                    var src = e.target.result;
                    $("#userAvatar").attr("src", src);
                    $("#userAvatar150").attr("src", src);
                    $("#userAvatar60").attr("src", src);
                    $("#userAvatar30").attr("src", src);
                }
            }
        });
    });
    $(document).ready(function () {
        $('#userTXSave').click(function () {
            $('#userAvatarUpload').click();
        });

    });
</script>
</body>

</html>